<!--多图组件-->

<script src="images/dropper-upload/jquery.fs.dropper.js?ver=1.20"></script>
<script src="images/jquery-ui/jquery-ui.min.js"></script>


{literal}

<style>

 .dropper,
 .dropper *,
 .dropper *:before,
 .dropper *:after {
  box-sizing: border-box;
 }
 .dropper-dropzone {
  background: #ffffff;
  border: 3px dashed #cccccc;
  border-radius: 0;
  color: #666666;
  cursor: pointer;
  font-size: 14px;
  margin: 0;
  padding: 25px;
  text-align: center;
 }
 .dropper.dropping .dropper-dropzone,
 .no-touch .dropper:hover .dropper-dropzone {
  background: #eeeeee;
  border-color: #999999;
  color: #333333;
 }
 .dropper-input {
  position: absolute;
  right: 100%;
  opacity: 0;
 }
 .no-opacity .dropper-input {
  left: -999px;
 }
 .btn-danger {
     display: inline-block;
     padding: 4px 12px;
     margin-bottom: 0;
     font-size: 14px;
     line-height: 20px;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     background-color: #ed5565;
     border-color: #ed5565;
     color: #FFF;
 }
 .label {
     background-color: #d1dade;
     color: #5e5e5e;
     font-size: 10px;
     font-weight: 600;
     padding: 3px 8px;
     text-shadow: none;
 }
 .label-primary {
     background-color: #1ab394;
     color: #FFF;
 }

</style>
<script>
$(function () {
var action = $(".gallery_upload").attr('data-action');
$(".gallery_upload").dropper({
action: action,
label: '将图片拖动至此处上传',
maxQueue: 2,
maxSize: 5242880,
// 5 mb
height: 150,
postKey: "img_url",
successaa_upload: function(data) {
if(data){
//填充图片内容
html="<div style='width: 20%;margin:10px;display: inline-block'>";
 html+=" <img  src='../"+data + "' style='width: 100%'/>";
 html+="<input type='hidden' name='gallery[]' value='"+data+"' />";
 html+='<p><span class="btn btn-danger" data-toggle="del_gallery_file"  data-url="del_gallery_img.php?rec=del&img='+data+'">删除图片</span>';
  html+='  <span class="label label-primary">提示：拖动图片可以排序</span></p>';
 html+"</div>";
$(".gallery_list").append(html);
}
}
});
//删除图集文件
$(document).on('click', '[data-toggle="del_gallery_file"]', function (e) {
var defaults = {
url: false,                                        //url 删除访问的url地址
id: '',                                                //id  删除的数据id
msg: '您确定要删除此图片？',        //msg 删除时的提示信息
obj: ''
}
var $this = $(this);
var url = $this.attr('data-url') || $this.attr('href');
var id = $this.attr('data-id');
var msg = $this.attr('data-msg');
var options = {url: url, msg: msg, obj: $this};
console.log(options);
options = $.extend({}, defaults, options);
$.get(options.url, options.id, function (data) {
if(data){
options.obj.parent().parent().remove();
alert('删除成功');
}
});
});
//拖动排序
$('.move-mod').sortable({
cursor: "move",
items: "div",
tolerance:"pointer",
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
});
})</script>
{/literal}